<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <link href="css/style.css" rel='stylesheet' type='text/css' />
    <style type="text/css">
        html,body{
            width:100%;
            height:100%
        }
        body{
            margin:0;padding:0;border:0;
            font-family: 'Open Sans', sans-serif;
            background: url("images/bg4.jpg") no-repeat 0px 0px;
            background-size: 100%;
        }
        h1 {
            font-family: 'Exo 2', sans-serif;
            text-align: center;
            padding-top: 2em;
            font-weight: 400;
            color: #2B2B36;
            font-size: 2em;
        }
        label{
            color: #9199aa;
            font-size: 17px;
            margin-right: 30px;
        }
        .msg{
            width: 100%;
            height: 40px;
            margin-top: 35px;
        }
        .signup input{
            width: 100%;
            height: 70.4px;
            font-size: 30px;
            color: #fff;
            outline: none;
            border: none;
            background: #3ea751;
            padding: 18px 0;
            cursor: pointer;
            border-bottom: 1px solid #2b2b36;
        }
        .signup input:hover{
            background: #ff2775;
        }
        .signin input{
            margin-top: 0;
        }
    </style>
</head>
<body>
<script type="text/javascript" src="js/vendor/jquery-2.2.4.min.js"></script>

<script type="text/javascript">
    window.onload = function(){
        if (${repassword != null}){
            alert("${repassword}");
        }
    }
</script>
<!--SIGN UP-->
<h1>User Login</h1>
<div class="login-form" id="login-app">
    <div class="head-info">
        <label class="lbl-1"> </label>
        <label class="lbl-2"> </label>
        <label class="lbl-3"> </label>
    </div>
    <div class="clear"> </div>
    <div class="avtar">
        <img src="images/avtar1.jpg" style="border-radius: 79px;"/>
    </div>
    <form method="post" action="/user/login">
        <input type="text" name="username" value="&nbsp;请&nbsp;输&nbsp;入&nbsp;用&nbsp;户&nbsp;名" onfocus="if(value=='&nbsp;请&nbsp;输&nbsp;入&nbsp;用&nbsp;户&nbsp;名') {value=''}" onblur="if (value=='') {value='&nbsp;请&nbsp;输&nbsp;入&nbsp;用&nbsp;户&nbsp;名'}">
        <input type="password" name="password" value="**********" onfocus="if(value=='**********') {value=''}" onblur="if (value=='') {value='**********'}">
        <br>
        <select  class="flag" name="flag">
            <option value="0">管理员</option>
            <option value="1">读者</option>
        </select></br>
        <div class="msg">
            <label></label>
        </div>
        <div class="signin">
            <input type="submit" value="Login" >
        </div>
    </form>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="/plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="/plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="/plugins/axios/axios.min.js"></script>
<script src="/js/request.js"></script>
<script src="/js/validate.js"></script>

<script>
    new Vue({
        el: '#login-app',
        data() {
            return {
                loginForm:{
                    username: 'admin',
                    password: '123456'
                },
                loading: false
            }
        },
        computed: {

        },
        created() {
        },
        methods: {
            async handleLogin() {
                this.$refs.loginForm.validate(async (valid) => {
                    if (valid) {
                        this.loading = true
                        let res = await loginApi(this.loginForm)
                        if (String(res.code) === '1') {//1表示登录成功
                            localStorage.setItem('userInfo',JSON.stringify(res.data))
                            window.location.href= ''
                        } else {
                            this.$message.error(res.msg)
                            this.loading = false
                        }
                    }
                })
            }
        }
    })
</script>
</body>
</html>